<template>
  <div class="activity-card" @click="handleClick">
    <div class="activity-cover" :style="coverStyle">
      <div class="activity-status" :class="statusClass">{{ statusText }}</div>
    </div>
    <div class="activity-info">
      <div class="activity-title">{{ activity.title }}</div>
      <div class="activity-time">
        <i class="el-icon-time"></i> {{ formatTime(activity.startTime) }}
      </div>
      <div class="activity-location" v-if="activity.location">
        <i class="el-icon-location"></i> {{ activity.location }}
      </div>
      <div class="activity-description">{{ truncatedDescription }}</div>
      <div class="activity-meta">
        <span class="activity-organizer" v-if="activity.organizer">
          <i class="el-icon-user"></i> {{ activity.organizer }}
        </span>
        <span class="activity-signup-count">
          <i class="el-icon-s-claim"></i> {{ activity.signupCount || 0 }}人报名
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ActivityCard',
  props: {
    activity: {
      type: Object,
      required: true
    },
    clickable: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    truncatedDescription() {
      if (!this.activity.description) return '暂无描述';
      return this.activity.description.length > 60
        ? this.activity.description.substring(0, 60) + '...'
        : this.activity.description;
    },
    coverStyle() {
      return {
        backgroundImage: this.activity.coverImage 
          ? `url(${this.activity.coverImage})` 
          : `url(${this.getDefaultCover()})`
      };
    },
    activityStatus() {
      const now = new Date().getTime();
      const startTime = this.activity.startTime ? new Date(this.activity.startTime).getTime() : 0;
      const endTime = this.activity.endTime ? new Date(this.activity.endTime).getTime() : 0;
      
      if (now < startTime) {
        return 'upcoming';
      } else if (now >= startTime && (now <= endTime || !endTime)) {
        return 'ongoing';
      } else {
        return 'ended';
      }
    },
    statusClass() {
      return {
        'status-upcoming': this.activityStatus === 'upcoming',
        'status-ongoing': this.activityStatus === 'ongoing',
        'status-ended': this.activityStatus === 'ended'
      };
    },
    statusText() {
      const statusMap = {
        'upcoming': '即将开始',
        'ongoing': '进行中',
        'ended': '已结束'
      };
      return statusMap[this.activityStatus] || '';
    }
  },
  methods: {
    formatTime(timeString) {
      if (!timeString) return '时间待定';
      const date = new Date(timeString);
      return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${this.formatHour(date.getHours())}:${this.padZero(date.getMinutes())}`;
    },
    formatHour(hour) {
      return hour < 10 ? `0${hour}` : hour;
    },
    padZero(num) {
      return num < 10 ? `0${num}` : num;
    },
    getDefaultCover() {
      const defaultCovers = [
        'https://img.freepik.com/free-vector/gradient-abstract-background_52683-12878.jpg',
        'https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg',
        'https://img.freepik.com/free-vector/abstract-banner-background-with-pastel-colors_1361-3323.jpg',
      ];
      
      // 使用活动ID或标题生成一致的索引
      let seed = this.activity.id || this.activity.title || '';
      let hash = 0;
      const str = String(seed);
      for (let i = 0; i < str.length; i++) {
        hash = str.charCodeAt(i) + ((hash << 5) - hash);
      }
      
      return defaultCovers[Math.abs(hash) % defaultCovers.length];
    },
    handleClick() {
      if (this.clickable) {
        this.$emit('click', this.activity);
      }
    }
  }
};
</script>

<style scoped>
.activity-card {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.activity-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.activity-cover {
  height: 160px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.activity-status {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.status-upcoming {
  background-color: #ecf5ff;
  color: #409eff;
}

.status-ongoing {
  background-color: #f0f9eb;
  color: #67c23a;
}

.status-ended {
  background-color: #f4f4f5;
  color: #909399;
}

.activity-info {
  padding: 16px;
}

.activity-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #333;
}

.activity-time,
.activity-location {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.activity-time i,
.activity-location i {
  margin-right: 6px;
}

.activity-description {
  font-size: 14px;
  color: #666;
  margin: 12px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.activity-meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #999;
  margin-top: 12px;
  border-top: 1px solid #f0f0f0;
  padding-top: 12px;
}

.activity-meta > span {
  display: flex;
  align-items: center;
}

.activity-meta i {
  margin-right: 4px;
}
</style> 